
<template>
    <div>
        <el-cascader
            clearable
            :value="citySelection"
            :options="options"
            @change="citySelectionChange"
            :placeholder="placeholder"
            ref="citySelection"
            style="width: 100%"
        ></el-cascader>
    </div>
</template>

<script>
import { treeByArea } from "@/api/cwgd/cwgdApi.js";

export default {
    model: {
        prop: "value",
        event: "dataChange",
    },
    props: {
        value: {
            type: Array,
            default() {
                return [];
            },
        },
        placeholder: {
            type: String,
            default: "请选择",
        },

        query: {
            default: 2,
        },

        // 获取选中的节点	(leafOnly) 是否只是叶子节点(true)
    },

    data() {
        return {
            options: [],
            citySelection: [],
            cityObj: {},
            //   propSelect: {
            //     // checkStrictly: true,
            //     lazy: true, //	是否动态加载子节点，需与 lazyLoad 方法结合使用
            //     lazyLoad: this.handleGetClassOrStudent, //懒加载调用的方法
            //   },
        };
    },
    watch: {
        value: {
            handler(val) {
                this.citySelection = val;
            },
            deep: true,
        },
    },
    created() {
        this.treeByArea();
    },
    mounted() {},
    methods: {
        clearAllChildren(items, childrenName = "children") {
            for (let i = 0; i < items.length; i++) {
                const item = items[i];
                // 当前对象存在children
                if (item && item[childrenName]) {
                    // children为空数组时删除
                    if (item[childrenName].length === 0) {
                        delete item[childrenName];
                    } else {
                        // 递归当前children数组
                        this.clearAllChildren(item[childrenName], childrenName);
                    }
                }
            }
            return items;
        },
        treeByArea() {
            treeByArea({ regionLevel: this.query }).then((res) => {
                if (res.code == "200") {
                    this.options = this.clearAllChildren(res.data);
                }
            });
        },
        citySelectionChange(val) {
            if (val) {
                this.$emit(
                    "change",
                    this.$refs.citySelection.getCheckedNodes(true)
                );
            } else {
                this.$emit("change", val);
            }
        },
    },
};
</script>

<style lang="scss" scoped></style>
